<template>
  <div class="app-container">
    <div class="card-list">
      <el-row justify="space-around">
        <el-col :span="4">
          <div class="card-item">
            <div class="card-item-title">总门禁数</div>
            <div class="card-item-content">51</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="card-item">
            <div class="card-item-title">开启门禁</div>
            <div class="card-item-content">25</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="card-item">
            <div class="card-item-title">关闭门禁</div>
            <div class="card-item-content">20</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="card-item">
            <div class="card-item-title">离线设备</div>
            <div class="card-item-content">6</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="card-item">
            <div class="card-item-title">报警设备</div>
            <div class="card-item-content">2</div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div style="width: 100%">
      <el-row :gutter="20" style="width: 100%">
        <el-col :span="18">
          <img :src="_imports_2" class="imgStyle" alt="巡更路线" />
        </el-col>
        <el-col :span="6">
          <ul class="list">
            <li><label>门禁名称：</label>一区2号</li>
            <li>
              <label>门禁控制：</label>
              <el-button type="success" size="default" class="buttonStyle"
                >开</el-button
              ><el-button type="danger" size="default" class="buttonStyle"
                >关</el-button
              >
            </li>
            <li>
              <label>实时画面：</label>
              <div class="pic">
                <img :src="_imports_3" alt="实时画面" />
              </div>
            </li>
            <li></li>
          </ul>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup>
import _imports_2 from '@/assets/images/2.png'
import _imports_3 from '@/assets/images/3.png'

import { zoneTreeSelect } from '@/api/emergency/mats'

const { proxy } = getCurrentInstance()

/* 获取单位字典 */
const { sys_basicequ_status } = proxy.useDict('sys_basicequ_status')

const single = ref(true)
const multiple = ref(true)
const loading = ref(false)
const zoneOptions = ref([])
const recordsList = ref([])
const total = ref(20)

const mocks = [
  {
    id: 1,
    date: '2021-01-01 12:00'
  },
  {
    id: 2,
    date: '2021-09-01 17:00'
  },
  {
    id: 3,
    date: '2021-02-01 14:00'
  },
  {
    id: 4,
    date: '2021-04-01 18:00'
  },
  {
    id: 5,
    date: '2022-01-01 11:00'
  }
]

recordsList.value = mocks

const data = reactive({
  queryParams: { pageNum: 1, pageSize: 10 }
})
const { queryParams } = toRefs(data)

/** 存放位置树结构 */
function getZoneTree() {
  return zoneTreeSelect().then((response) => {
    zoneOptions.value = response.data
  })
}

function getList() {}

function handleAdd() {}

function handleUpdate() {}

function handleDelete() {}

function handleExport() {}

function handleView() {}

// 获取最新搜索下拉选项
getZoneTree()

getList()
</script>
<style lang="scss" scoped>
.imgStyle {
  width: 100%;
}
.card-item {
  border: #dcdfe6 1px solid;
  padding: 30px 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 12px;
  text-align: center;
  .card-item-title {
    font-size: 18px;
    color: #606266;
    line-height: 1;
    margin-bottom: 20px;
  }
  .card-item-content {
    color: #e6a23c;
  }
}
.list {
  list-style: none;
  padding: 0;
  li {
    margin-bottom: 30px;
    label {
      color: #898c94;
      margin-right: 10px;
    }
    .pic {
      margin-top: 20px;
    }
  }
}
.buttonStyle {
  padding: 10px 20px;
}
</style>
